<template>
  <div v-if="datas">
    <!-- 身体 -->
   
    <div v-for="p in datas" :key="p.lid">
       <h3 class="h3-1">{{p.lbt}}</h3>
      <img
        :src="`/img/icons/轮播图/${p.picture}`"
      />
      <p class="p-1">材料</p>
      <span v-html="p.Material_details"></span>
      <p class="p-1">做法</p>
      <span v-html="p.Practice_details"></span>
    </div>
    <br />
  </div>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";
import Bottom from "@/components/Bottom.vue";
export default {
  components: { NavigationBar, Bottom },
   data() {
    return {
      datas: [],
      datass: [],
      lbts: "",
    }
   },
   mounted(){
    this.getLbts();
   },
   //发送请求
   methods:{
      getLbts(){
      const url='http://127.0.0.1:3000/v1/slideshows/slideshow';
      this.axios.get(url).then((res)=>{
        console.log(res);
        this.datass=res.data.data;
        console.log(this.datass);
        
        console.log(this.$route.query.lbt);

        this.lbts = this.$route.query.lbt;

        let lbts = this.lbts;

        this.datass.forEach((value) => {
        if (value.lbt == lbts) {
        this.datas.push(value);
          }
        });
      })
    },
   },
};
</script>

<style scoped>
.h3-1 {
  text-align: center;
  color: #999;
  margin-top: 10px;
}
.p-1 {
  color: #999;
  margin: 4px;
}
img{
  width: 100%;
}
</style>